<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('精选列表')"/>
    <th:block th:include="include :: bootstrap-fileinput-css"/>
</head>
<body>
<div class="container">
    <th:block th:include="include :: navigate('精选列表','关 闭','index')"/>


    <div class="row btn-group-sm" id="toolbar" role="group">
        <div class="col-xs-8">
            <!-- Button trigger modal -->
            <button type="button" class="btn btn-success btn-sm" data-toggle="modal" data-target="#addBeautiful">
                添加
            </button>

            <a class="btn btn-danger btn-sm disabled" id="delete-btn">
                <i class="fa fa-remove"></i> 删除
            </a>
        </div>
        <div class="col-xs-4 text-right">
            <button class="page-btn" onclick="clickPage('up')">&laquo;</button>
            <span id="total"></span>
            <button class="page-btn" onclick="clickPage('down')">&raquo;</button>
        </div>
    </div>

    <!-- Modal -->
    <div class="modal fade" id="addBeautiful" tabindex="-1" role="dialog" aria-labelledby="addBeautifulLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="addBeautifulLabel">新增精选</h4>
                </div>

                <div class="modal-body">
                    <form id="beautifulForm">
                        <div class="form-group">
                            <label for="imagePath" class="control-label is-required">资源上传：</label>
                            <input type="hidden" id="imagePath" name="imagePath">
                            <input id="file" name="file" type="file" class="file-loading" multiple>
                        </div>
                        <div class="form-group">
                            <label for="orders" class="control-label is-required">权重：</label>
                            <input type="number" class="form-control" id="orders" name="orders" maxlength="5" required
                                   placeholder="请输入权重" value="1">
                        </div>

                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" id="add-btn">保存</button>
                </div>
            </div>
        </div>
    </div>


    <div class="pt-2">
        <table class="table table-hover table-sm">
            <thead class="thead-light">
            <tr>
                <th scope="col" width="35">

                </th>
                <th scope="col">图片</th>
                <th scope="col" width="45">权重</th>
            </tr>
            </thead>

            <tbody id="subjectTale"></tbody>
        </table>
    </div>
</div>
<th:block th:include="include :: footer"/>
<th:block th:include="include :: bootstrap-fileinput-js"/>
<script>
    var id = undefined;
    var token = window.token
    var pageNum = 1, pageSize = 10, total = 0, pages = 0
    var imagePath = ""

    var listSubject = "/backend/beautiful/listBeautiful"
    var addBeautiful = "/backend/beautiful/addBeautiful"
    var deleteSubject = "/backend/beautiful/deleteBeautiful"

    $(function () {
        $("#add-btn").click(function (){
            var data = serializeObject($("#beautifulForm"))

            var regexNotNull = /^.+$/;
            if (!regexNotNull.test (data.imagePath)) {
                cocoMessage.warning("资源未上传。",2000)
                return false
            }

            var regexPositive = /^[1-9]\d*$/;
            if (!regexPositive.test (data.orders)){
                cocoMessage.warning("权重必须为正数。",2000)
                return false
            }
            postAjax(addBeautiful,JSON.stringify(data),function (response) {
                if (response.code == 0){
                    cocoMessage.success(response.msg+"！")
                    $('#addBeautiful').modal('hide')
                    loadListBeautiful()
                }
            })
        })

        //删除精选
        $("#delete-btn").click(function () {
            console.log("id",id)
            if (id == 0 || id == undefined || id == null || id == "") {
                cocoMessage.warning("请选择要删除的精选。",2000)
                return false
            }
           deleteAjax(deleteSubject+"/"+id, {},function (response){
               if (response.code == 0){
                   cocoMessage.success(response.msg+"！")
                   loadListBeautiful()
               }
           })
        })
        loadListBeautiful()
    })

    function loadListBeautiful(){
        var data = {
            "pageNum": pageNum,
            "pageSize": pageSize,
        }
        getAjax(listSubject, data, function (response) {
            pageNum = response.data.pageNum
            pageSize = response.data.pageSize
            total = response.data.total
            pages = response.data.pages
            parseListBeautiful(response.data)
        })
    }

    function parseListBeautiful(data){
        var subjectHtml = ""
        $.each(data.list, function (index, item) {
            subjectHtml += "<tr>" +
                "<td class='text-center'><input type='checkbox' class='checkbox' onclick='clickCheckbox(this)' data-id='" + item.id + "'></td>" +
                "<td><img src="+ item.imagePath +" class='img-thumbnail'/></td>" +
                "<td><span> " + item.orders + "</span></td>" +
                "</tr>"
        })
        $("#subjectTale").html(subjectHtml)
        $("#total").text(pageNum + "/" + pages)
    }
    /**
     * 点击分页
     * @param type
     */
    function clickPage(type) {
        if (type == "up") {
            console.log(pageNum)
            if (pageNum > 1) {
                pageNum--
                loadListBeautiful()
            }
        } else {
            if (pageNum < pages) {
                pageNum++
                loadListBeautiful()
            }
        }
    }

    /**
     * 点击复选框
     * @param op
     */
    function clickCheckbox(op) {
        // 如果当前复选框被选中
        if ($(op).is(':checked')) {
            // 取消所有其他同类别复选框的选中状态
            $('.checkbox').not(op).prop('checked', false);
            // 可以在这里添加更多操作，比如收集选中项的值等
            // 激活按钮
            $("#delete-btn").removeClass("disabled")
            id = $(op).data("id")
        } else {
            // 如果所有复选框都未被选中，则禁用按钮
            if (!$('.checkbox:checked').length) {
                $("#delete-btn").addClass("disabled")
            }
            id = undefined
        }
    }

    $("#file").fileinput({
        uploadUrl: "/backend/resource/upload",
        multiple: true,
        maxFileCount: 1,
        ajaxSettings: {
            headers: {
                "token": window.token
            }
        },
        allowedFileExtensions: ["jpg", "png", "jpeg", "gif", "mp4", "avi", "rmvb"],

    }).on('fileuploaded', function (event, data) {
        //拼接data.response.msg 到 imagePath 中，用 ; 隔开
        imagePath += data.response.msg + ";"
        $("#imagePath").val(imagePath)
    })
</script>
</body>
</html>
